

<template>

  <div>
   <div class="operate">
    <el-button class="butB_Sel" @click="printBtn()">打印</el-button>
    是否残联<el-checkbox v-model="is_can" @change="dj(1)"></el-checkbox>
    是否慢病<el-checkbox v-model="is_mb" @change="dj(2)"></el-checkbox>

    <div class="area">
      选择区域:
      <el-select @change="handleChange" v-model="tabeldata.area" clearable="true" placeholder="请选择">
        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
    
    </div>
   </div>
    <div id="printcons" style="width:340px;height:300px; ">
      <div class="" style="width:340px;height:200px;font-size: 14px;padding-right:40px;">
        <div class="">
          <h3 style="text-align: center;margin: 0 5px;opacity: 0;">{{ tabeldata.company }}</h3>
          <h3 style="text-align: center;margin: 0 5px;opacity: 0;">费用专用发票</h3>
          <p style="margin: 0 0.3125rem;font-size: 14px;">
            <span style="font-size: 14px;">
              <span style="font-size: 14px;" v-if="tabeldata.area">{{ tabeldata.area }}</span>
            </span>

            <span style="font-size: 14px;float:right;margin-right:25px"> {{ tabeldata.number }} <span
                style="font-size: 14px;float:right" v-if="!is_can && !is_mb">{{ tabeldata.payment }}</span>
              <span style="font-size: 14px;float:right" v-if="is_can">残联挂账</span>
              <span style="font-size: 14px;float:right" v-if="is_mb">门诊慢性病</span>

            </span>
          </p>
          <p v-if="!is_can" style="margin: 0 0;font-size: 14px;opacity: 0;">发票代码：2433433</p>

          <p v-if="!is_can" style="margin: 0 0;font-size: 20px;opacity: 0;height:15px">发票代码：2433433</p>


          <h4 style="margin: 10px 0px;"><span style="opacity: 0;">收费单位</span> {{ tabeldata.company }}</h4>
          <table>
            <tr>
              <td style="height: 25px; line-height:25px;opacity: 0;">
                <div>姓名</div>
              </td>
              <td style="height: 25px width:80px">
                <div style=" height: 25px">{{ tabeldata.name }}</div>
              </td>
              <td style="height: 25px; line-height:25px;opacity: 0; width:75px">
                <div style="">收费科室</div>
              </td>
              <td style="height: 25pxwidth:80px">
                <div style=" height: 25px">{{ tabeldata.dept }}</div>
              </td>
            </tr>
            <tr>
              <td style="height: 25px; line-height:25px;opacity: 0;width:80px">
                <div>收费项目</div>
              </td>
              <td style="height: 25px; width:80px">
                <div style=" height: 25px">{{ tabeldata.fee_type }}</div>
              </td>
              <td style="height: 25px; line-height:25px;opacity: 0; width:75px">
                <div style=" ">应收金额</div>
              </td>
              <td style="height: 25pxwidth:80px">
                <div style=" height: 25px">{{ tabeldata.should_amount }}</div>
              </td>
            </tr>
            <tr>
              <td style="height: 25px; line-height:25px;opacity: 0;width:80px">
                <div>统筹挂账</div>
              </td>
              <td style="height: 25px;width:80px">
                <div style="height: 25px">{{ tabeldata.charge_amount }}</div>
              </td>
              <td style="height: 25px; line-height:25px; opacity: 0; width:75px">
                <div style="">实收金额</div>
              </td>
              <td style="height: 25px;width:80px">
                <div style=" height: 25px">{{ tabeldata.amount }}</div>
              </td>
            </tr>
            <tr>
              <td style="height: 25px; line-height:25px;opacity: 0;width:80px">
                <div style=" width:80px">金额大写</div>
              </td>
              <td style="height: 25px;" colspan="3" span="3">
                <div style=" height: 25px;">{{ tabeldata.up_amount }}</div>
              </td>
              <td></td>
              <td></td>
            </tr>
          </table>

          <p style="height:20px;margin:0px;"> <span style="float: left;"><span style="opacity: 0;">操作员操</span>
              {{ tabeldata.toll_user }} {{ tabeldata.toll_user_number }}</span>
            <span style="float: left;margin-left:20px;">{{ tabeldata.timeame[0] }} <span style="opacity: 0;">年</span>
              {{ tabeldata.timeame[1] }}
              <span style="opacity: 0;">月</span>{{ tabeldata.timeame[2] }} <span style="opacity: 0;">日</span></span>
            <br />

            <span style=" margin-left:25px;">个人支付: {{ tabeldata.person_amount }} </span>
            <span style="margin-left:35px;">余额：{{ tabeldata.balance }} </span>
            <span style="margin-left:35px;">统筹支付：{{ tabeldata.tc_amount }} </span>
          </p>


        </div>
      </div>
    </div>
  </div>
</template>
<script>

import { getPrintInvoice, getdictIndex ,getPrintInvoiceRegister} from "@/api/register";
import print from 'print-js'
import { getCityRegion } from "@/api/dict";
export default {
  props: ['id','type'],
  data() {
    return {
      tabeldata: {},
      sourcelist: [],
      dayin: false,
      is_can: false,
      is_mb: false,
      options: [],
    };
  },

  mounted() {
    this.getindex()
    
    this.getCity()
    if(this.type==1){
      this.getPintRegister()
    }else if(this.type==2){
      this.getpint()
    }
   
  },
 
  methods: {
    handleChange(e){
      this.tabeldata.area=this.options.find((v) => v.id == e).name;
    },
    getCity() {
      getCityRegion({})
        .then((res) => {
          if (res.code == 200) {
            this.options = res.data;
          }
        })
        .catch((e) => { });
    },
    getindex() {
      getdictIndex({ group_id: '40' }).then(res => {
        let data = res.data;
        data.forEach((item, key) => {
          if (item.id == 40) {

            this.sourcelist = item.items;
          }
        })
      })
    },
    getPintRegister(){
      getPrintInvoiceRegister({ id: this.id }).then(res => {
        if (res.code == 200) {
          this.tabeldata = res.data
          this.tabeldata.timeame = this.tabeldata.time.split(' ')[0].split('-')

        }
      })
    },
    getpint() {
      getPrintInvoice({ id: this.id }).then(res => {
        if (res.code == 200) {
          this.tabeldata = res.data
          this.tabeldata.timeame = this.tabeldata.time.split(' ')[0].split('-')

        }
      })
    },
    dj(type) {

      if (type == 1) {
        this.is_mb = false;
      }
      if (type == 2) {
        this.is_can = false;
      }
    },
    mapxing(num) {
      var art = "";
      this.sourcelist.map(function (value, i, array) {

        if (value.id == num) {
          art = value.name;
        }

      })
      console.log(art)
      return art;
    },

    printBtn(e) {
      this.dayin = true
      setTimeout(() => {
        this.dayinfun()
      }, 200);

    },
    dayinfun() {
      this.remove_ie_header_and_footer();
      //   let subOutputRankPrint = document.getElementById("printcons");
      //   console.log(subOutputRankPrint.innerHTML);
      //   let newContent = subOutputRankPrint.innerHTML;
      //   let oldContent = document.body.innerHTML;
      //   document.body.innerHTML = newContent;
      //   window.print();
      //   window.location.reload();
      //   document.body.innerHTML = oldContent;
      //   return false;
      const style = '@page {margin:0 10mm};'
      setTimeout(function () {
        print({
          printable: 'printcons',	//打印区域id
          type: 'html',		//打印类型是html
          scanStyles: false,
          style,
          targetStyles: ['*'],
        })
      }, 500)
    },
    //去掉页眉和页脚
    remove_ie_header_and_footer() {
      var hkey_path;
      hkey_path =
        "HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
      try {
        var RegWsh = new ActiveXObject("WScript.Shell");
        RegWsh.RegWrite(hkey_path + "header", "");
        RegWsh.RegWrite(hkey_path + "footer", "");
      } catch (e) { }
    },



  },

};
</script>
<style media="print">
@page {
  size: auto;
  /* auto is the initial value */
  margin: 0mm;
  /* this affects the margin in the printer settings */
}

@media print {}

body {
  -webkit-print-color-adjust: exact;
}
</style>
<style lang='scss' scoped>
// #printcons>>> tr{
// 						height: 25px!important;
// 						// padding: 20px 20px;
// 						margin: 0rem;

// 					}
//                     	#printcons>>>td{
//                         height: 25px!important;
//                         width: 120px;
// 						/* border: 0.5px solid #000000; */
// 						padding: 0rem;
// 						margin: 0rem;
// 						text-align: center;
// 					}

.operate{
  display: flex;
  align-items: center;
  .area{
    padding-left: 20px;
  }
}
</style>
